<template>
    <div class="commonlist">
        <div class="commonlist-header" v-if="type == 1">
            <div class="commonlist-header-left">
                <img class="list-icon" src="../assets/img/icon/list.png" />
                <span class="list-text">源码下载</span>
            </div>
            <div class="commonlist-header-right">
                <ul class="right-list">
                    <li class="right-list-item">
                        <span class="list-text">工作总结PPT</span>
                    </li>
                    <li class="right-list-item">
                        <span class="list-text">培训PPT</span>
                    </li>
                    <li class="right-list-item">
                        <span class="list-text">快闪PPT</span>
                    </li>
                    <li class="right-list-item">
                        <span class="list-text">竞聘PPT</span>
                    </li>
                    <li class="right-list-item">
                        <span class="list-text">自我介绍PPT</span>
                    </li>
                    <li class="right-list-item">
                        <span class="list-text">幼儿园PPT</span>
                    </li>
                    <li class="right-list-item more">
                        <span class="list-text">查看更多&nbsp;&nbsp;&gt;</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="commonlist-header" v-if="type == 2">
            <div class="commonlist-header-left">
                <span class="list-text other-model">您可能会喜欢的其他模板</span>
            </div>
        </div>
        <div class="commonlist-main">
            <div class="item" v-for="item of datalist" :key="item.id">
                <div class="item-poster" @mouseover="showMask(item.id)" @mouseout="hideMask(item.id)">
                    <img class="poster" :src="item.pic" />
                    <div class="poster-mask" v-show="item.maskFlag">
                        <button class="down-btn" @click="goDetail">
                            <img class="white-down" src="../assets/img/icon/white-down.png">
                            <span class="down-text">立即下载</span>
                        </button>
                    </div>
                </div>
                <div class="item-title-box">
                    <span class="item-title" :class="{btm:type!=3}">{{item.title}}</span>
                </div>
                <div class="item-menu" v-if="type!=3">
                    <div class="item-menu-left">
                        <img
                            class="item-menu-icon"
                            src="../assets/img/icon/download.png"
                            title="下载"
                        />
                        <span class="item-menu-count" title="人数">{{item.downCount}}</span>
                    </div>
                    <div class="item-menu-right">
                        <img class="item-menu-icon" src="../assets/img/icon/see.png" title="查看" />
                        <span class="item-menu-count" title="人数">{{item.showCount}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-box" v-if="pageFlag">
            <button class="prev" @click="prev" v-show="curPage>1">上一页</button>
            <button class="page" @click="chosePage(1)" v-show="curPage>4">1</button>
            <button class="more" v-show="curPage>5">···</button>
            <button class="page" @click="chosePage(curPage-n)" v-for="(n) in prevPage(curPage)" :key="'p'+n">{{curPage-n}}</button>
            <button class="page active">{{curPage}}</button>
            <button class="page" @click="chosePage(curPage+n)" v-for="(n) in nextPage(curPage)" :key="'n'+n">{{curPage+n}}</button>
            <button class="more" v-show="curPage+4<totalPage">···</button>
            <button class="page" @click="chosePage(totalPage)" v-show="curPage+3<totalPage">{{totalPage}}</button>
            <button class="next" @click="next" v-show="curPage<totalPage">下一页</button>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            downMaskFlag:false
        }
    },
    props:{
        datalist:{
            type:Array,
            default:[]
        },
        type:{
            type:Number,
            default:1
        },
        pageFlag:{
            type:Boolean,
            default:false
        },
        totalPage:{
            type:Number,
            default:0
        },
        curPage:{
            type:Number,
            default:1
        }
    },
    methods:{
        prev(){
            this.$emit('prev');
        },
        next(){
            this.$emit('next');
        },
        chosePage(page){
            page<1 && (page = 1);
            page>this.totalPage && (page = this.totalPage);
            this.$emit('chosePage',page);
        },
        showMask(id){
            this.datalist.map(el=>{
                if(el.id == id){
                    el.maskFlag = true;
                }
            })
            // this.datalist[index].maskFlag = true;
        },
        hideMask(id){
            this.datalist.map(el=>{
                if(el.id == id){
                    el.maskFlag = false;
                }
            })
            // this.datalist[index].maskFlag = false;
        },
        prevPage(num){
            let tmpNum = num -= 1;
            let tmpArr = [];
            if(tmpNum>3){
                tmpArr = [3,2,1];
            }else{
                for(let i = tmpNum;i>0;i--){
                    tmpArr.push(i);
                }
            }
            return tmpArr;
        },
        nextPage(num){
            let tmpNum = this.totalPage - num;
            if(tmpNum>3){
                return 3;
            }else{
                return tmpNum;
            }
        },
        goDetail(){
            this.$router.push('/detail').catch(err=>{
                // console.log(err)
            });
        }
    }
};
</script>

<style lang="less" scoped>
@border: 1px solid #f1f1f1;
.commonlist {
    width: 100%;
    .commonlist-header {
        height: 42px;
        display: flex;
        justify-content: space-between;
        .commonlist-header-left {
            .list-icon {
                width: 20px;
                height: 16px;
                vertical-align: middle;
                margin-right: 6px;
            }
            .list-text {
                display: inline-block;
                vertical-align: middle;
                color: @main-font-color;
                font-size: 22px;
            }
            .other-model{
                font-size:@main-font-size;
            }
        }
        .commonlist-header-right {
            .right-list {
                display: flex;
                justify-content: space-between;
                .right-list-item {
                    margin: 0 8px;
                    background: #f2f2f2;
                    .list-text {
                        cursor: pointer;
                        display: inline-block;
                        color: @main-font-color;
                        font-size: 14px;
                        padding: 6px 8px;
                    }
                }
            }
        }
    }
    .commonlist-main {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .item {
            border: @border;
            width: 18%;
            margin-bottom: 22px;
            background:#ffffff;
            border-radius:6px;
            // box-shadow:3px 3px 6px 0px @normal-shadow-color;
            .item-poster {
                width: 100%;
                height: 380px;
                overflow: hidden;
                position:relative;
                .poster {
                    width: 100%;
                    height: 100%;
                }
                .poster-mask{
                    position:absolute;
                    top:0;
                    left:0;
                    width:100%;
                    height:100%;
                    background:rgba(0,0,0,0.7);
                    display:flex;
                    align-items: center;
                    justify-content: center;
                    .down-btn{
                        outline:none;
                        border:none;
                        background:#d7000f;
                        border-radius:32px;
                        color:#ffffff;
                        padding:8px 30px;
                        cursor:pointer;
                        .white-down{
                            display:inline-block;
                            vertical-align: middle;
                            margin-right:12px;
                        }
                        .down-text{
                            display:inline-block;
                            vertical-align: middle;
                            letter-spacing:4px;
                        }
                    }
                }
            }
            .item-title-box {
                padding: 0px 18px;
                font-size: @main-font-size;
                .item-title {
                    display: inline-block;
                    line-height: 48px;
                    width: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .item-title.btm {
                    border-bottom: @border;
                }
            }
            .item-menu {
                display: flex;
                justify-content: space-between;
                font-size: 0;
                padding: 12px 18px;
                .item-menu-left {
                    width: 50%;
                    font-size: 14px;
                    text-align: left;
                    .item-menu-icon {
                        cursor: pointer;
                        vertical-align: middle;
                        width: 15px;
                        height: 16px;
                    }
                    .item-menu-count {
                        cursor: pointer;
                        display: inline-block;
                        vertical-align: middle;
                        color: #a4a4a4;
                        font-size: 18px;
                    }
                }
                .item-menu-right {
                    width: 50%;
                    font-size: 14px;
                    text-align: right;
                    .item-menu-icon {
                        cursor: pointer;
                        vertical-align: middle;
                        width: 21px;
                        height: 16px;
                    }
                    .item-menu-count {
                        cursor: pointer;
                        display: inline-block;
                        vertical-align: middle;
                        color: #a4a4a4;
                        font-size: 18px;
                    }
                }
            }
        }
    }
    .page-box{
        text-align:center;
        padding:30px 0;
        button{
            border:1px solid #e5e5e5;
            background:#ffffff;
            outline:none;
            padding:0 14px;
            color:@main-font-color;
            font-size:@main-font-size;
            height:38px;
            line-height:38px;
            text-align:center;
            box-sizing: border-box;
            border-radius:6px;
            margin:0 4px;
            cursor:pointer;
        }
        .page{}
        .more{
            border:1px solid transparent;
            cursor:default;
        }
        .active{
            background:@main-color;
            color:#ffffff;
        }
    }
}
</style>